<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <!-- 搜索与添加区 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容">
            <el-button slot="append" icon="el-icon-search"> </el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">添加用户</el-button>
        </el-col>
      </el-row>
      <div style="margin: 20px"></div>
      <!-- 列表区 -->
      <el-table :data="userList" border>
        <el-table-column type="index" label="#" align="center" />
        <el-table-column prop="username" label="姓名" align="center" />
        <el-table-column prop="email" label="邮箱" align="center" />
        <el-table-column prop="mobile" label="电话" align="center" />
        <el-table-column prop="role_name" label="角色" align="center" />
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#cccccc"
              @change="statusChange(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-s-tools"
              @click="handleSetup(scope.row)"
              >设置</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="querInfo.pagenum"
        :limit.sync="querInfo.pagesize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import { userlist } from "@/api/user/index.js";
export default {
  name: "Users",
  data() {
    return {
      //获取用户列表
      querInfo: {
        query: "",
        pagenum: 1,
        pagesize: 10,
      },
      //条数
      total: 0,
      //列表数据
      userList: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      userlist(this.querInfo).then((res) => {
        this.total = res.data.data.total;
        this.userList = res.data.data.users;
      });
    },
    /**
     * @desc :修改状态
     * @date :
     * @params :
     * @author : liangdecheng
     **/
    statusChange() {},
    /**
     * @desc :修改
     * @date :
     * @params :
     * @author : liangdecheng
     **/
    handleUpdate() {},
    /**
     * @desc :删除
     * @date :
     * @params :
     * @author : liangdecheng
     **/
    handleDelete() {},
    /**
     * @desc :设置
     * @date :
     * @params :
     * @author : liangdecheng
     **/
    handleSetup() {},
  },
};
</script>
<style lang='less' scoped>
</style>